<template>
  <div class="student-details">
    <el-button @click="backHandler">返回</el-button>
    <el-card class="box-card" v-if="student">
      <template slot="header" class="clearfix">
        <h3>学生详情</h3>
      </template>
      <!-- 通过label-position属性设置表单左对齐 -->
      <el-form :model="emptyForm" label-width="100px" label-position="left">
        <el-form-item label="学号">
          <span>{{ student.id }}</span>
        </el-form-item>
        <el-form-item label="姓名">
          <span>{{ student.name }}</span>
        </el-form-item>
        <el-form-item label="年龄">
          <span>{{ student.age }}</span>
        </el-form-item>
        <el-form-item label="性别">
          <span>{{ student.gender }}</span>
        </el-form-item>
        <el-form-item label="平均分">
          <span>{{ student.averageScore.toFixed(1) }}</span>
        </el-form-item>
        <el-form-item label="评价等级">
          <span>{{ student.evaluationLevel }}</span>
        </el-form-item>
      </el-form>
      <el-card class="mt-20 score-card" shadow="hover">
        <template slot="header" class="clearfix">
          <h3>课程成绩</h3>
        </template>
        <el-table :data="student.courses" border style="width: 100%">
          <el-table-column prop="name" label="课程名称" />
          <el-table-column prop="score" label="成绩" width="100" />
          <el-table-column prop="evaluation" label="评价" />
        </el-table>
      </el-card>
    </el-card>
    <div v-else>
      未找到该学生信息
    </div>
  </div>
</template>

<script>
// 脚本部分保持不变
export default {
  name: 'StudentDetails',
  data() {
    return {
      student: null,
      emptyForm: {}, // 用于满足el-form的model属性要求
      studentCourseData: [
        { 
          id: '2308300005', 
          name: '王恺天', 
          age: 21, 
          gender: '男',
          courses: [
            { name: 'JAVA高级编程', score: 92, evaluation: '优秀' },
            { name: '数据库原理', score: 90, evaluation: '优秀' },
            { name: '前端开发技术基础', score: 88, evaluation: '优秀' },
            { name: '前端开发技术高级', score: 86, evaluation: '良好' },
            { name: '项目配置与管理', score: 84, evaluation: '良好' }
          ],
          averageScore: 88,
          evaluationLevel: '优秀'
        },
        { 
          id: '2308300021', 
          name: '院凯龙', 
          age: 21, 
          gender: '男',
          courses: [
            { name: 'JAVA高级编程', score: 89, evaluation: '优秀' },
            { name: '数据库原理', score: 87, evaluation: '良好' },
            { name: '前端开发技术基础', score: 85, evaluation: '良好' },
            { name: '前端开发技术高级', score: 83, evaluation: '良好' },
            { name: '项目配置与管理', score: 81, evaluation: '良好' }
          ],
          averageScore: 85,
          evaluationLevel: '良好'
        },
        { 
          id: '2308300032', 
          name: '石洪旭', 
          age: 21, 
          gender: '男',
          courses: [
            { name: 'JAVA高级编程', score: 91, evaluation: '优秀' },
            { name: '数据库原理', score: 89, evaluation: '优秀' },
            { name: '前端开发技术基础', score: 87, evaluation: '良好' },
            { name: '前端开发技术高级', score: 85, evaluation: '良好' },
            { name: '项目配置与管理', score: 83, evaluation: '良好' }
          ],
          averageScore: 87,
          evaluationLevel: '优秀'
        },
        { 
          id: '2308300009', 
          name: '闫晨辉', 
          age: 21, 
          gender: '男',
          courses: [
            { name: 'JAVA高级编程', score: 88, evaluation: '优秀' },
            { name: '数据库原理', score: 86, evaluation: '良好' },
            { name: '前端开发技术基础', score: 84, evaluation: '良好' },
            { name: '前端开发技术高级', score: 82, evaluation: '良好' },
            { name: '项目配置与管理', score: 80, evaluation: '良好' }
          ],
          averageScore: 84,
          evaluationLevel: '良好'
        },
        { 
          id: '2308300010', 
          name: '任诗韵', 
          age: 21, 
          gender: '女',
          courses: [
            { name: 'JAVA高级编程', score: 90, evaluation: '优秀' },
            { name: '数据库原理', score: 88, evaluation: '优秀' },
            { name: '前端开发技术基础', score: 86, evaluation: '良好' },
            { name: '前端开发技术高级', score: 84, evaluation: '良好' },
            { name: '项目配置与管理', score: 82, evaluation: '良好' }
          ],
          averageScore: 86,
          evaluationLevel: '良好'
        }
      ]
    }
  },
  mounted() {
    const studentId = this.$route.query.id;
    this.student = this.studentCourseData.find(item => item.id === studentId);
    if (this.student && !this.student.averageScore) {
      this.student.averageScore = this.calculateAverageScore(this.student.courses);
    }
  },
  methods: {
    backHandler() {
      this.$router.go(-1);
    },
    calculateAverageScore(courses) {
      const total = courses.reduce((sum, course) => sum + course.score, 0);
      return (total / courses.length).toFixed(1);
    }
  }
}
</script>

<style scoped>
.student-details {
  padding: 20px;
  /* 页面整体背景 */
  background-color: #f5f7fa;
}
.box-card {
  width: 100%;
  margin-bottom: 20px;
  /* 学生详情卡片背景 */
  background-color: #fff8e6;
  border: 1px solid #ffe082;
}
.mt-20 {
  margin-top: 20px;
}
/* 成绩卡片样式 */
.score-card {
  background-color: #e8f5e9;
  border: 1px solid #a5d6a7;
}
/* 表单内容区域样式 */
.el-form {
  padding: 15px;
}
/* 表格背景样式 */
.el-table {
  background-color: rgba(255, 255, 255, 0.7);
}
/* 确保卡片标题左对齐 */
.el-card__header {
  text-align: left !important;
  /* 卡片标题栏背景 */
  background-color: rgba(0, 0, 0, 0.03);
}
</style>